<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>10-千千音乐盒实现全选反选</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">

	*{
		margin: 0;
		padding: 0;
	}

	#panel{
		background-color: #fff;
		border:1px solid #ddd;
		border-radius: 4px;
		width: 400px;
		padding:20px;
		margin: 100px auto;
	}

	.panel-footer{
		text-align: center;
	}
		
	.panel_title h3{
		text-align: center;
	}



</style>
</head>
<body>
	

<div id="panel">

	<div class="panel_title">
		<h3>千千音乐盒</h3>
		<hr>
	</div>


		<!-- 单选按钮框 -->
		<div class="panel_content">
			<input type="checkbox">飘洋过海来看你<br>
			<input type="checkbox">飘洋过海来看你<br>
			<input type="checkbox">飘洋过海来看你<br>
			<input type="checkbox">飘洋过海来看你<br>
			<input type="checkbox">飘洋过海来看你<br>
			<input type="checkbox">飘洋过海来看你<br>
			<input type="checkbox">飘洋过海来看你<br>
			<input type="checkbox">飘洋过海来看你<br>
			<input type="checkbox">飘洋过海来看你<br>
		</div><br>

	<div class="panel_footer">
		<hr><br>
		<button id="allSelect">全选</button>&nbsp;
		<button id="cancelSelect">取消选中</button>&nbsp;
		<button id="reverseSelect">反选</button>
	</div>

</div>


<script type="text/javascript">

	function $(id){
		return typeof id=== 'string'?document.getElementById(id):null;
	}
//1.获取复选框
	var inputs=document.getElementsByTagName('input')

//2.全选

	$('allSelect').onclick = function(){
		for(var i=0; i<inputs.length; i++){
			inputs[i].checked = true
		}
	}
//3. 全不选
	$('cancelSelect').onclick = function(){
		for(var i=0; i<inputs.length; i++){
			inputs[i].checked = false
		}
	}

//4. 反选

	$('reverseSelect').onclick = function(){
		for(var i=0; i<inputs.length; i++){

		//取反操作，将当前的值取反
			inputs[i].checked = !inputs[i].checked
			
		//简易版，但代码过于繁多
			/*if(inputs[i].checked == true){
				inputs[i].checked = false
			}else{
				inputs[i].checked = true
			}*/
		}
	}





</script>


</body>
</html>